<template>
  <div style="padding:5px">
    <el-descriptions direction="vertical" :column="6" border size="mini">
      <el-descriptions-item label="姓名">{{ keyInfo.name }}</el-descriptions-item>
      <el-descriptions-item label="身份证">{{ keyInfo.cardNo }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ keyInfo.tel }}</el-descriptions-item>
      <el-descriptions-item label="行业黑名单">

<!--        {{hitLists}}-->

        <el-popover
          placement="bottom"
          trigger="hover">
          <h3>姓名_身份证_电话_标识</h3>
          <p v-for="(i_,i) of hitLists">
            {{ i_.name  }}_
            {{  i_.cardNo }}_
            {{  i_.tel  }}_
            {{i_.labels}}
<!--            {{// JSON.parse(i_.labels)}}-->
<!--            <span v-for="(j_,j) of JSON.parse(i_.labels)" style="color:red;">-->
<!--              {{ ' ' + j_ }}-->
<!--            </span>-->
          </p>
          <el-tag
            slot="reference"
            :type="black"
            effect="dark">
            {{ black == 'danger' ? '命中' : '未命中' }}
          </el-tag>
        </el-popover>

      </el-descriptions-item>
      <el-descriptions-item label="提交时间">{{ keyInfo.createTime }}</el-descriptions-item>
      <el-descriptions-item v-has-role="['common']">
        <el-button
          type="text"
          @click="openPay=true">快速充值
        </el-button>
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in productPriceVos" :label="item.name" :name="'PI'+index" :key="index"
                   :lazy="true">
        <div v-if="item.code == 'jcxx'">
          <keep-alive>
            <jcxx ref="jcxx" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                   queryId:id,
                   productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'zjrl'">
          <keep-alive>
            <zjrl ref="zjrl" v-if="item.status" v-on:openShare='openShare'
                  :queryId="id"
                  :keyInfo="keyInfo"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'yys'">
          <keep-alive>
            <yys ref="yys" v-if="item.status" v-on:openShare='openShare'
                 :queryId="id"
                 :keyInfo="keyInfo"
                 :price="item.price"
                 :priceType="item.isSystemPrice"
                 :productId=item.id
                 :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'syshc'">
          <keep-alive>
            <syshc ref="syshc" v-if="item.status" v-on:openShare='openShare'
                   :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                   :price="item.price"
                   :priceType="item.isSystemPrice"
                   :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'qjld'">
          <keep-alive>
            <qjld ref="qjld" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'dttz'">
          <keep-alive>
            <dttz ref="dttz" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'blxw'">
          <keep-alive>
            <blxw ref="blxw" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'sqyx'">
          <keep-alive>
            <sqyx ref="sqyx" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>
        <div v-if="item.code == 'graj'">
          <keep-alive>
            <graj ref="graj" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'tza'">
          <keep-alive>
            <tza ref="tza" v-if="item.status" v-on:openShare='openShare'
                 :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                 :price="item.price"
                 :priceType="item.isSystemPrice"
                 :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'jxzs'">
          <keep-alive>
            <jxzs ref="jxzs" v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'hy'">
          <keep-alive>
            <hy ref="hy" v-if="item.status" v-on:openShare='openShare'
                :queryData="{
                    queryId:id,
                    productId: item.id
                 }"
                :cardNo="keyInfo.cardNo"
                :name="keyInfo.name"
                :price="item.price"
                :priceType="item.isSystemPrice"
                :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>
        <div v-if="item.code == 'grbdc'">
          <keep-alive>
            <grbdc ref="grbdc" v-if="item.status" v-on:openShare='openShare'
                   :queryData="{
                      queryId:id,
                      productId: item.id
                    }"
                   :price="item.price"
                   :priceType="item.isSystemPrice"
                   :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'qwdbg'">
          <keep-alive>
            <qwdbg ref="qwdbg" v-if="item.status" v-on:openShare='openShare'
                   :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                   :info=keyInfo
                   :price="item.price"
                   :priceType="item.isSystemPrice"
                   :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>

        <div v-if="item.code == 'rzbd'">
          <keep-alive>
            <rzbd v-if="item.status" v-on:openShare='openShare'
                  :queryData="{
                    queryId:id,
                    productId: item.id
                   }"
                  :info=keyInfo
                  :price="item.price"
                  :priceType="item.isSystemPrice"
                  :explain=item.explain />
            <h1 v-else>{{ item.remark }}</h1>
          </keep-alive>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="邀请" :visible.sync="addReferOpen" @close="addReferOpen=false">
      <inviteQuery v-if="addReferOpen" :item="keyInfo" :sct="sct" />
    </el-dialog>
    <el-dialog title="自助充值" :visible.sync="openPay" @close="refreshBalance" :destroy-on-close="true"
               :close-on-click-modal="false">
      <pay v-if="openPay" />
    </el-dialog>
  </div>
</template>

<script>
  import {getQuery, blackList} from "@/api/system/query";
  import {userQueryItem} from "@/api/system/product";
  import inviteQuery from "@/views/components/inviteQuery.vue"
  import pay from "@/views/components/pay.vue"

  import jcxx from "@/views/components/jcxx.vue";
  import zjrl from "@/views/components/zjrl.vue";
  import syshc from "@/views/components/syshc.vue";
  import yys from "@/views/components/yys.vue";
  import qjld from "@/views/components/qjld.vue";
  import dttz from "@/views/components/dttz.vue";
  import blxw from "@/views/components/blxw.vue";
  import tza from "@/views/components/tza.vue";
  import hy from "@/views/components/hy.vue";
  import grbdc from "@/views/components/grbdc.vue";
  import sqyx from "@/views/components/sqyx.vue";
  import rzbd from "@/views/components/rzbd.vue";
  import graj from "@/views/components/graj.vue";
  import jxzs from "@/views/components/jxzs.vue";
  import qwdbg from "@/views/components/qwdbg.vue";

  export default {
    components: {
      inviteQuery,
      pay,
      jcxx,
      zjrl,
      syshc,
      yys,
      qjld,
      dttz,
      blxw,
      tza,
      hy,
      grbdc,
      sqyx,
      rzbd,
      graj,
      jxzs,
      qwdbg
    },
    name: "Report",
    data() {
      return {
        addReferOpen: false,
        openPay: false,
        id: undefined,
        indexItem: 0,
        keyInfo: {
          name: undefined,
          cardNo: undefined,
          tel: undefined,
          createTime: undefined
        },
        sct: undefined,
        productPriceVos: [],
        activeName: 'PI0',
        black: 'success',
        hitLists: []
      }
    },

    created() {
      this.id = this.$route.query.id
      getQuery(this.id).then(response => {
        if (response.code == 200) {
          let data = response.data
          this.keyInfo = data
          blackList(
            {
              name: data.name,
              cardNo: data.cardNo,
              tel: data.tel
            }
          ).then(response => {
            console.log(response)
            if (response.length > 0) {

              console.log(response.length)

              this.black = 'danger';

              this.hitLists.splice(0, response.length, ...response)

              console.log('---this.hitLists---',this.hitLists)
            }
          })
        }
      })
      userQueryItem(1).then(response => {
        this.productPriceVos = response.data.productPriceVos
      })
      // 定义事件,注意箭头函数应用
      this.$bus.$on('openPay', () => {
        this.openPay = true
      })
    },

    methods: {
      handleClick(tab) {
        this.activeName = tab._props.name
        this.indexItem = tab.index
      },
      openShare(data) {
        this.sct = data
        this.addReferOpen = true
      },
      refreshBalance() {
        let code = this.productPriceVos[this.indexItem].code
        this.$refs[code][0].refreshBalance();   // 调用子组件方法
      }
    }
  }
</script>

<style scoped>
  h1 {
    text-align: center;
  }

  ::v-deep .my_dialog .el-dialog__body {
    padding: 12px 22px;
  }
</style>
